<template>
  <div class="code_wrap">
    <template v-if="!isSuccess">
      <el-form :model="form">
        <img src="@/assets/images/write_off.png" alt="" class="write_off" />
        <p class="title">请输入核销码</p>
        <el-form-item>
          <el-input v-model="form.inputPhone" type="number"></el-input>
        </el-form-item>
        <el-form-item>
          <div class="write_btn" @click="handleWriteOff">确认核销</div>
        </el-form-item>
      </el-form>
    </template>
    <template v-else>
      <div class="write_success">
        <img src="@/assets/images/success_icon.png" alt="" />
        <p>验证成功</p>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { debounce } from 'lodash'
import { writeCode } from '@/api/site/site'
import { useRoute } from 'vue-router'

defineOptions({
  name: 'WriteOff',
})

interface Form {
  inputPhone: string
  orderId: string | undefined
  phone: string | undefined
}

const form = reactive<Form>({
  inputPhone: '',
  orderId: '',
  phone: '',
})

const isSuccess = ref(false)
const route = useRoute()

// 通过扫描二维码获取订单编号和手机号
form.orderId = (route.query.orderId as string) || undefined
form.phone = (route.query.phone as string) || undefined

// 验证核销
const handleWriteOff = debounce(
  async () => {
    if (form.inputPhone == '') {
      ElMessage.error(`请输入核销码`)
      return
    }
    try {
      const res = await writeCode(form)
      isSuccess.value = true
    } catch (e) {
      console.error(e)
    }
  },
  1000,
  { leading: true, trailing: false },
)
</script>

<style scoped lang="scss">
.code_wrap {
  height: 100vh;
  padding: 0 42px;
  overflow: hidden;
  text-align: center;
  box-sizing: border-box;
  padding-top: 64px;
  .write_off {
    width: 109px;
    height: 109px;
  }
  .title {
    font-size: 18px;
    color: #383838;
    line-height: 26px;
    margin: 7px 0 13px;
  }
  .el-form-item {
    margin-bottom: 30px;
    :deep(.el-input__inner) {
      height: 49px;
      line-height: 49px;
      text-align: center;
      font-size: 28px;
      color: #383838;
    }
  }
  .write_btn {
    width: 100%;
    height: 52px;
    line-height: 52px;
    background: #0988fb;
    font-size: 18px;
    color: #fff;
    border: none;
    box-sizing: border-box;
    border-radius: 58px;
  }
}
.write_success {
  img {
    width: 46px;
    height: 46px;
  }
  p {
    font-size: 16px;
    color: #383838;
    line-height: 22px;
    margin-top: 13px;
  }
}
</style>
